<%--后台生成模式--%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
  <meta name="description" content=""/>
  <meta name="author" content=""/>
  <link rel="icon" href="${pageContext.request.contextPath}/static/images/favicon.ico"/>
  <title>二维码</title>
  <!-- Bootstrap core CSS -->
  <link href="${pageContext.request.contextPath}/static/dist/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
  <link href="${pageContext.request.contextPath}/static/dist/css/bootstrap-grid.css" type="text/css" rel="stylesheet"/>
  <link href="${pageContext.request.contextPath}/static/dist/css/bootstrap-reboot.css" type="text/css" rel="stylesheet"/>
  <%--<link href="${pageContext.request.contextPath}/static/bootstrap-colorpicker/css/bootstrap-colorpicker.css" type="text/css" rel="stylesheet"/>--%>
  <link href="${pageContext.request.contextPath}/static/color-picker/git-Simonwep-pickr/dist/pickr.min.css" type="text/css" rel="stylesheet"/>
  <link href="${pageContext.request.contextPath}/static/dist/zaddcss/zaddindex.css" type="text/css" rel="stylesheet"/>
  <link class="theme blue" rel="stylesheet" href="${pageContext.request.contextPath}/static/tablesorter/v2.31.1/css/theme.blue.css">
  <style type="text/css">
    input[name='okey'] {
      width: 10%;
      border-radius: 5px;
      border: solid rgb(227, 227, 227);
    }

    input[name='otext'] {
      width: 80%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: solid rgb(227, 227, 227);
    }

    input[name='result'] {
      width: 80%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: solid rgb(227, 227, 227);
    }

    input[name='deviceNum'] {
      width: 30%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: solid rgb(227, 227, 227);
    }

    input[name='deviceSN'] {
      width: 30%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: solid rgb(227, 227, 227);
    }

    input[name='deviceOriNum'] {
      width: 30%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: solid rgb(227, 227, 227);
    }

    .blockArea {
      border: 5px solid white;
      border-radius: 10px;
    }

    .colorhex {
      width: 80px;
    }

    input {
      border-radius: 5px;
    }
    /*style="position: fixed; z-index: 500; left: 743px; top: 155px; display: block;width: 420px;height: 490px;display: none;background-color: whitesmoke"*/
    #showQrImgDiv {
      position: fixed;
      z-index: 500; left: 743px;
      top: 155px;
      /*display: block;*/
      width: 300px;
      height: 350px;
      display: none;
      background-color: rgba(239, 236, 236, 0.2);
    }
    .p-in-table-word-4 {
      width: 70px;
    }
    .p-in-table-word-2 {
      width: 70px;
    }
    .table {
      table-layout: fixed;
    }
    .table tr td {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      table-layout: fixed;
    }
  </style>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Never expand</a>
  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
  <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown06" data-toggle="dropdown"
     aria-haspopup="true" aria-expanded="false">Dropdown</a>
  <div class="dropdown-menu" aria-labelledby="dropdown06">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
  <form class="form-inline my-2 my-md-0" action="#">
    <label>
      <input class="form-control" type="text" placeholder="Search"/>
    </label>
  </form>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01"
          aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
    QA<span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarsExample01">
    <p>1234567489123456798</p>
    <p>1234567489123456798</p>
    <p>1234567489123456798</p>
    <p>1234567489123456798</p>
  </div>
</nav>
<main role="main">
  <section class="jumbotron text-center">
    <div class="container">
      <h3 class="jumbotron-heading">二维码查询</h3>
    </div>
  </section>
  <div class="album py-3 bg-light">
    <form class="form-signin" action="${pageContext.request.contextPath}/qrmaker/file/download" method="post">
      <div class="bd-example">
        <div class="container">
          <label>始设备号：
            <input name="begindeviceNum" id="begindeviceNum" type="text" value="" placeholder="1"/>
          </label>
          <label>末设备号：
            <input name="enddeviceNum" id="enddeviceNum" type="text" value="" placeholder="1"/>
          </label>
          <label>服务器地址：
            <select id="equalUrl" name="equalUrl" style="width: 40%;border-radius:5px">
              <option value="1#1_singbon_com" selected>1.singbon.com</option>
              <option value="2#smartschool_singbon_com">smartschool.singbon.com</option>
              <option value="3#a2_4000063966.com">a2.4000063966.com</option>
              <option value="4#chongdian_4000063966_com">chongdian.4000063966.com</option>
              <option value="5#qisong_4000063966_com">qisong.4000063966.com</option>
              <option value="6#imust.card.4000063966.com">imust.card.4000063966.com</option>
            </select>
          </label>
          <button id="selectQr" type="button" class="btn btn-primary" onclick="query()">查询</button>
          <input class="btn btn-primary" type="submit" value="批量下载"/>
        </div>
      </div>
    </form>
    <div class="album py-3 bg-light">
      <div class="container">
        <%--<table class="tablesOrder" width="100%" border="1px" align="center" valign="center">--%>
        <table class="table">
          <thead>
          <tr>
            <th><p class="p-in-table-word-2">序号</p></th>
            <th><p class="p-in-table-word-4">设备号</p></th>
            <th><p class="p-in-table-word-4">图片地址</p></th>
            <th><p class="p-in-table-word-4">设备URL</p></th>
            <th><p class="p-in-table-word-2">操作</p></th>
            <th><p class="p-in-table-word-4">物理地址</p></th>
          </tr>
          </thead>
          <tbody>
          <tr></tr>
          </tbody>
          <tfoot>
          <tr>
            <td>tfoot1</td>
            <td>tfoot2</td>
            <td>tfoot3</td>
            <td>tfoot4</td>
            <td>tfoot5</td>
            <td>tfoot6</td>
          </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
  <div id="showQrImgDiv" style="text-align: center">
    <%--<p style="margin-top: 40px;font-size: 20px" id="showQrImgInfoTxt"></p><br>--%>
    <img title="" id="showQrImg" src="" class="qrcode_pic" width="260" height="290" alt="">
  </div>
</main>
<footer class="text-muted" style="margin-top: -10px">
  <div class="container">
    <p class="float-right">
      <a href="#">返回最上</a>
    </p>
    <p>示例页面 &copy; Bootstrap!</p>
    <p>
      <a href="https://github.com/zghnzch">访问我们的主页</a>
    </p>
  </div>
</footer>
</body>
<!-- region 引入js文件-->
<script src="${pageContext.request.contextPath}/static/jquery/3.3.1/jquery-3.3.1.min.js"></script>
<%--  表格排序Tablesorter  --%>
<script src="${pageContext.request.contextPath}/static/tablesorter/v2.31.1/js/jquery.tablesorter.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/tablesorter/v2.31.1/js/widgets/widget-filter.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/tablesorter/v2.31.1/js/widgets/widget-scroller.js" type="text/javascript"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/tablesorter/v2.31.1/js/singbon-orders.js"></script>
<script type="text/javascript">
  $(function () {
  });
</script>
<script type="text/javascript">
  let eleQueryBtn = $("#selectQr");
  function query() {
    eleQueryBtn.attr("disabled", "disabled");
    const eleSelectId_equalUrl = $("#equalUrl option:selected");
    console.log(eleSelectId_equalUrl.html());
    console.log(eleSelectId_equalUrl.text());
    $('tbody tr').remove();
    $.ajax({
      type: 'post',
      async: false, //是否异步
      dataType: "json",
      url: "/qrmaker/query",
      data: {
        "begindeviceNum": $("#begindeviceNum").val(),
        "enddeviceNum": $("#enddeviceNum").val(),
        "equalUrl": eleSelectId_equalUrl.val(),
        "equalUrlText": eleSelectId_equalUrl.text()
      },
      beforeSend: function (beforeSendData) {
        //请求前的处理
        //console.log('beforeSend请求前的处理 3 ');
      },
      success: function (result) {
        console.log("返回结果:");
        console.log(result);
        if (result != null && result.length > 0) {
          for (var i = 0; i < result.length; i++) {
            /*style="white-space: nowrap;"*/
            $('tbody').append(
              '<tr>' +
              '<td>' + (i + 1) + '</td>' +
              '<td>' + result[i].deviceId + '</td>' +
              '<td><a target="_blank"  href=' + result[i].httpUrl + ' >' + result[i].httpUrl + '<a></td>' +
              '<td>' + result[i].qrcodeVisitUrl + '</td>' +
              '<td>' +
              '<a target="_blank" class="verifyInfo" title="点击查看后右键或者ctrl+s,保存图片到本地" href=' + result[i].httpUrl + ' download="' + result[i].deviceId + '">' +
              '点我下载' +
              '<img  title="" alt="' + result[i].deviceId + '" src="' + result[i].httpUrl + '" class="qrcode_pic" width="20" height="23" onmouseenter="showBigImg(this)" onmouseleave="hideBigImg()">' +
              '</a>' +
              '<td>' + result[i].hardDiskUrl + '</td>' +
              '</tr>');
          }
        }
        orderTable();
        eleQueryBtn.removeAttr("disabled");
      },
      //请求完成动作
      complete: function (completeData) {
        //请求完成的处理
        //console.log('请求完成的处理 2 ');
        eleQueryBtn.removeAttr("disabled");
      },
      //请求失败或者错误动作
      error: function (errorData) {
        //请求出错处理
        console.log("errorData");
        console.log(errorData);
      }
    });
  }
  /**
   *
   */
  function orderTable() {
    let startFixedColumns = 0;
    $(".tablesOrder").tablesorter({
      theme: 'blue',
      widthFixed: false,
      showProcessing: true,
      headerTemplate: '{content} {icon}',
      /*widgets:['filter','pager','resizable','scroller','uitheme','zebra'],*/
      widgets: ['filter', 'pager', 'resizable', 'scroller', 'uitheme', 'zebra'],
      widgetOptions: {
        // scroll tbody to top after sorting
        scroller_upAfterSort: true,
        // pop table header into view while scrolling up the page
        scroller_jumpToHeader: true,
        /**************两个都可以使用,看情况*****************/
        scroller_height: $(window).height() - 300,
        //scroller_height:$(document).height()-320,
        /*******************************/
        // set number of columns to fix
        scroller_fixedColumns: startFixedColumns,
        // add a fixed column overlay for styling
        scroller_addFixedOverlay: false,
        // add hover highlighting to the fixed column (disable if it causes slowing)
        scroller_rowHighlight: 'hover',
        // bar width is now calculated; set a value to override
        scroller_barWidth: 10,
      }
    });
    $('.tablesorter-filter').hide();
  }
  /**
   * showBigImg
   */
  function showBigImg(img) {
    console.log(img);
    $("#showQrImg").attr('src', img.src);
    /*$("#showQrImgInfoTxt").text("设备:" + img.alt);*/
    $("#showQrImgDiv").show();
  }
  function hideBigImg() {
    $("#showQrImgDiv").hide();
  }
</script>
</html>

